<template>
    <div class="tag">
        <el-scrollbar always wrap-style="top: -5px;">
            <div class="item">
                <el-tag
                    v-for="tag in historyRoutes"
                    :closable="tag.path!=='/listView/home'"
                    :key="tag.path"
                    :class="{current:tag.path==route.path}"
                    :effect="tag.path===route.path? 'dark':'plain'"
                    type="info"
                    @click="updataRoute(tag.path)"
                    @close="removeRoute(tag.path)"
                >
                <i class="dot" v-show="route.path === tag.path"></i> {{ tag.title }}
                </el-tag>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, watch} from 'vue'
    import { useRoute, useRouter } from 'vue-router';


    let route=useRoute()
    let router=useRouter()
    // 历史路由
    let historyRoutes=reactive([
        {
            path:'/listView/home',
            title:'首页'
        }
    ])
    // 监听路由的变化
    watch(()=>route,(curRoute:any)=>{
        // console.log(curRoute.path,curRoute.meta.title)
        let hasRoute=historyRoutes.find(item=>item.path==curRoute.path)
        if(!hasRoute){
            historyRoutes.push({
                path:curRoute.path,
                title:curRoute.meta.title
            })
        }
    },{immediate:true,deep:true})
    // 切换
    const updataRoute=(path:string)=>{
        router.push(path)
    }
    // 删除
    const removeRoute=(path:string)=>{
        // 获取当前点击的下标
        let index=historyRoutes.findIndex(item=>item.path==path)
        // console.log(index)
        // 去除
        historyRoutes.splice(index,1)
        // 跳转上一个路由
        router.push(historyRoutes[index-1].path)
    }
</script>

<style lang="scss" scoped>
    .tag{
        margin-left: 15px;
        padding: 5px 0;
    }
    .el-scrollbar__wrap{
        display: flex;
        flex-wrap: nowrap;
    }
    .current {
        color: #fff;
        background-color: #42b983;

    }

    ::v-deep .el-tag__content {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .el-tag {
        margin-right: 5px;
    }

    .dot {
        display: block;
        width: 8px;
        height: 8px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: #fff;
    }
</style>